<template>
  <div class="circleNavBar">
    <VueDragResize :is-resizable="false">
      <ul class="menu" :class="flag1 ? 'active' : ''" @click="menuClick">
        <div class="toggle" :class="flag1 ? 'active' : ''">
          <div @click.stop="close">
            <svg-icon v-show="!flag1" icon-class="md-cancel" class="close" />
          </div>
          <i class="el-icon-plus" />
        </div>
        <!-- 首页 -->
        <li
          style="--i: 0"
          :class="flag == 0 ? 'active' : ''"
          @click.stop="liClick(0)"
        >
          <router-link to="/dashboard">
            <i
              class="el-icon-s-home"
            /></router-link>
        </li>
        <!-- 用户 -->
        <li
          style="--i: 1"
          :class="flag == 1 ? 'active' : ''"
          @click.stop="liClick(1)"
        >
          <router-link to="/base/users">
            <i class="el-icon-user" />
          </router-link>
        </li>
        <!-- 企业管理 -->
        <li
          style="--i: 2"
          :class="flag == 2 ? 'active' : ''"
          @click.stop="liClick(2)"
        >
          <router-link to="/companys/list">
            <svg-icon icon-class="peoples" />
          </router-link>
        </li>
        <!-- 基础题库 -->
        <li
          style="--i: 3"
          :class="flag == 3 ? 'active' : ''"
          @click.stop="liClick(3)"
        >
          <router-link to="/questions/list">
            <svg-icon icon-class="jichutiku" />
          </router-link>
        </li>
        <!-- 试题录入 -->
        <li
          style="--i: 4"
          :class="flag == 4 ? 'active' : ''"
          @click.stop="liClick(4)"
        >
          <router-link to="/questions/new">
            <svg-icon icon-class="luru1" />
          </router-link>
        </li>
        <!-- 学科管理 -->
        <li
          style="--i: 5"
          :class="flag == 5 ? 'active' : ''"
          @click.stop="liClick(5)"
        >
          <router-link to="/subjects/list">
            <svg-icon icon-class="subject" />
          </router-link>
        </li>
        <!-- 面试技巧 -->
        <li
          style="--i: 6"
          :class="flag == 6 ? 'active' : ''"
          @click.stop="liClick(6)"
        >
          <router-link to="/articles/list">
            <svg-icon icon-class="misnshijiqiao" />
          </router-link>
        </li>
        <!-- 退出 -->
        <li
          style="--i: 7"
          :class="flag == 7 ? 'active' : ''"
          @click.stop="logout()"
        >
          <a>
            <svg-icon icon-class="log-out" />
          </a>
        </li>
        <div class="indicator" />
      </ul>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize'
export default {
  components: {
    VueDragResize
  },
  props: {
    isCircleShow: {
      type: [Boolean, String],
      default: null
    }
  },
  data() {
    return {
      flag: 0,
      flag1: false
    }
  },
  mounted() {},
  methods: {
    close() {
      this.$emit('update:isCircleShow', false)
    },
    async logout() {
      this.flag = 7
      // this.$confirm('确认要退出吗？').then(() => {
      //   this.$store.dispatch('LogOut').then(() => {
      //     location.reload()
      //   })
      // })
      await this.$confirm('确认要退出吗？')
      await this.$store.dispatch('LogOut')
      location.reload()
    },
    menuClick() {
      this.flag1 = !this.flag1
    },
    liClick(i) {
      this.flag = i
      //   while (this.flag === 0) {
      //     this.$router.push('/dashboard')
      //     break
      //   }
      // switch (this.flag) {
      //   case 0:
      //     this.$router.push('/dashboard')
      //     break
      //   case 1:
      //     this.$router.push('/base/users')
      //     break
      //   case 2:
      //     this.$router.push('/companys/list')
      //     break
      //   case 3:
      //     this.$router.push('/questions/list')
      //     break
      //   case 4:
      //     this.$router.push('/questions/new')
      //     break
      //   case 5:
      //     this.$router.push('/subjects/list')
      //     break
      //   case 6:
      //     this.$router.push('/articles/list')
      //     break
      //   case 7:
      //     this.$confirm('确认要退出吗？').then(() => {
      //       this.$store.dispatch('LogOut').then(() => {
      //         location.reload()
      //       })
      //     })
      //     break
      // }
      // if (this.flag === 0) {
      //   // this.$router.push('/dashboard')
      // } else if (this.flag === 1) {
      //   this.$router.push('/base/users')
      // } else if (this.flag === 2) {
      //   this.$router.push('/companys/list')
      // } else if (this.flag === 3) {
      //   this.$router.push('/questions/list')
      // } else if (this.flag === 4) {
      //   this.$router.push('/questions/new')
      // } else if (this.flag === 5) {
      //   this.$router.push('/subjects/list')
      // } else if (this.flag === 6) {
      //   this.$router.push('/articles/list')
      // } else if (this.flag === 7) {
      //   this.$confirm('确认要退出吗？').then(() => {
      //     this.$store.dispatch('LogOut').then(() => {
      //       location.reload()
      //     })
      //   })
      // }
    }
  }
}
</script>

<style scoped>
.vdr.active:before {
  display: none;
}
.circleNavBar {
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
  height: 300px;
  background: transparent;
  position: fixed;
  right: 0;
  bottom: 0;
  /* min-width: 100vh; */
  width: 300px;
  z-index: 99;
}

.menu {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu .toggle {
  position: absolute;
  width: 75px;
  height: 75px;
  background: #fff;
  color: #222327;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  cursor: pointer;
  transition: 0.5s;
}
.menu .toggle .close{
  width: 30px;
  height: 30px;
  position: absolute;
  right: -5px;
  top: -5px;
}
.menu .toggle.active {
  transform: rotate(315deg);
  box-shadow: 0 0 0 68px #fff;
  background: #222327;
  color: #fff;
}
.menu li {
  position: absolute;
  list-style: none;
  left: 30px;
  transform: rotate(calc(360deg / 8 * var(--i))) translateX(40px);
  transform-origin: 140px;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
  z-index: 10;
}
.menu.active li {
  visibility: visible;
  opacity: 1;
}
.menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  font-size: 1.75em;
  color: #222327;
  transform: rotate(calc(360deg / -8 * var(--i)));
  border-radius: 50%;
}
.menu.active li.active {
  transform: rotate(calc(360deg / 8 * var(--i))) translateX(12px);
}
.indicator {
  position: absolute;
  left: calc(50% + 22px);
  transform-origin: right;
  width: 100px;
  height: 1px;
  /* background: #f00; */
  background: transparent;
  pointer-events: none;
  transition: 0.5s;
}
.indicator::before {
  content: "";
  position: absolute;
  top: -27.5px;
  left: 72px;
  width: 55px;
  height: 55px;
  background: #222237;
  box-shadow: 0 0 0 6px #29fd53;
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
}
.menu.active .indicator::before {
  opacity: 1;
  top: -27.5px;
  left: -27.5px;
  background: #29fd53;
  box-shadow: 0 0 0 6px #222237;
}
.menu li:nth-child(2).active ~ .indicator {
  transform: translateX(-103px) rotate(0deg);
}
.menu li:nth-child(3).active ~ .indicator {
  transform: translateX(-103px) rotate(45deg);
}
.menu li:nth-child(4).active ~ .indicator {
  transform: translateX(-103px) rotate(90deg);
}
.menu li:nth-child(5).active ~ .indicator {
  transform: translateX(-103px) rotate(135deg);
}
.menu li:nth-child(6).active ~ .indicator {
  transform: translateX(-103px) rotate(180deg);
}
.menu li:nth-child(7).active ~ .indicator {
  transform: translateX(-103px) rotate(-135deg);
}
.menu li:nth-child(8).active ~ .indicator {
  transform: translateX(-103px) rotate(-90deg);
}
.menu li:nth-child(9).active ~ .indicator {
  transform: translateX(-103px) rotate(-45deg);
}
</style>
